<template>
	<view>
		<u-navbar title="填写跟进" :autoBack="true" placeholder>
		</u-navbar>
		<view class="px-8">
			<view class="title-box py-16">
				<view class="fw-500 fs-16 color-5F6865 px-8">就诊反馈</view>
			</view>
			<view class="bg-fff px-16 br-8">
				<view class="pt-16 pb-8">
					<u--textarea v-model="medicalContent" border="none" maxlength="300" autoHeight
						placeholder="填写问诊反馈内容" count></u--textarea>
				</view>
				<view class="pb-16 ">
					<UploadBox ref="jzRefs" :count="6" :span="3" @uploadChange='jzUploadChange'>
					</UploadBox>
				</view>
			</view>
			<view class="title-box py-16">
				<view class="fw-500 fs-16 color-5F6865 px-8">工作反馈</view>
			</view>
			<view class="bg-fff px-16 br-8 py-8">
				<view class="flex-align py-16 form-item">
					<view class="fw-500 fs-14 lh-2 color-5F6865 flex-1">反馈医院</view>
					<view class="fw-400 fs-14 color-28302E">{{hospitalName}}</view>
				</view>
				<view class="flex-align py-16 form-item">
					<view class="fw-500 fs-14 lh-2 color-5F6865 flex-1">反馈医生</view>
					<input type="text" v-model="doctorName" placeholder="请填写内容" placeholder-class="input-css" />
				</view>
				<view class="pt-16 pb-8">
					<u--textarea v-model="workContent" border="none" maxlength="300" autoHeight placeholder="填写工作反馈内容"
						count></u--textarea>
				</view>
				<view class="pb-16">
					<UploadBox ref="gzRefs" :count="6" :span="3" @uploadChange='WorkUploadChange'>
					</UploadBox>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer bg-fff px-10 pt-8 flex-align"
			:style="{paddingBottom:`${$f.sys().safeAreaBottom ? $f.sys().safeAreaBottom : 10}px`}">
			<u-button text="提交" @click="submitFeedback"
				customStyle="background-color: #24C98F;color:#fff;border:none;"></u-button>
		</view>
	</view>
	</view>
</template>

<script>
	import UploadBox from "@/components/uploadBox.vue";
	export default {
		components: {
			UploadBox,
		},
		data() {
			return {
				workContent: '',
				medicalContent: '',
				doctorName: '',
				hospitalName: '',
				orderId: null,
				orderNumber: '',
				imageUrls: [],
				images: [],
				type: null,
				gzData: {},
				ysData: {}

			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.hospitalName = options.hospitalName;
			this.orderNumber = options.orderNumber;
			if (options.obj) {
				this.type = 'edit';
				const obj = JSON.parse(decodeURIComponent(options.obj));
				console.log('111111',obj)
				this.medicalContent = obj.recordContent;
				this.images = obj.images ? obj.images.split(',') : [];
				this.gzData = obj;
			}
			if (options.ysObj) {
				this.type = 'edit';
				const ysObj = JSON.parse(decodeURIComponent(options.ysObj));
				console.log('222222',ysObj)
				this.workContent = ysObj.content;
				this.imageUrls = ysObj.imageUrls ? ysObj.imageUrls.split(',') : [];
				this.doctorName = ysObj.doctorName;
				this.ysData = ysObj;
			}
		},
		mounted() {
			if (this.images.length && this.type == 'edit') {
				this.$refs.jzRefs.images = this.images;
			}
			if (this.imageUrls.length && this.type == 'edit') {
				this.$refs.gzRefs.images = this.imageUrls;
			}

			console.log('-------》', this.ysData, this.gzData)
		},
		methods: {
			jzUploadChange(e) {
				this.images = e;
			},
			//工作反馈图片
			WorkUploadChange(e) {
				console.log(e);
				this.imageUrls = e;
			},
			// 提交反馈
			submitFeedback() {
				if (!this.medicalContent) return this.$f.msg('请填写就诊反馈！');
				if (!this.workContent) return this.$f.msg('请填写工作反馈！');
				if (!this.doctorName) return this.$f.msg('请填写反馈医生！');
				this.submitMedicalFeedback();
			},
			//工作反馈
			submitWorkFeedback() {
				this.$api.post({
					url: this.type == 'edit' ? '/companion/order/follow' : '/companion/follow/workFeedback',
					loadingTip: '加载中...',
					data: {
						orderId: this.orderId,
						content: this.workContent,
						doctorName: this.doctorName,
						imageUrls: this.imageUrls.join(','),
						id: this.type == 'edit' ? this.ysData.id : null
					},
					success: res => {
						uni.showToast({
							title: '提交成功',
							mask: true,
							icon: "success",
							duration: 1500
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					},
					fail: error => {
						this.$f.msg('网络异常，请稍后重试');
					},
				})
			},
			//就诊反馈
			submitMedicalFeedback() {
				this.$api.post({
					url: this.type == 'edit' ? '/companion/order/healthRecord' :
						'/companion/follow/medicalFeedback',
					loadingTip: '加载中...',
					data: {
						orderNumber: this.orderNumber,
						recordContent: this.medicalContent,
						images: this.images.join(','),
						recordId: this.type == 'edit' ? this.gzData.recordId : null
					},
					success: res => {
						this.submitWorkFeedback();
					},
					fail: error => {
						this.$f.msg('网络异常，请稍后重试');
					},
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}


	::v-deep .u-row {
		flex-wrap: wrap;
	}

	.form-item {
		border-bottom: 1px solid #F2F6F5;

		input {
			text-align: right;
			font-size: 28rpx;
		}

	}

	.input-css {
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}

	::v-deep .u-textarea {
		padding: 24rpx 40rpx 64rpx 40rpx !important;
		border-radius: 8rpx !important;
		font-size: 28rpx !important;
		min-height: 70px !important;
		border: 1px solid #DDDDDD;
		background-color: transparent !important;
	}

	::v-deep .u-textarea__count {
		bottom: 20rpx !important;
		right: 20rpx !important;
		background-color: transparent !important;
	}

	::v-deep .input-placeholder {
		font-size: 28rpx !important;
		font-weight: 400 !important;
		color: #999999 !important;
	}


	.title-box {
		view {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				width: 8rpx;
				height: 100%;
				background-color: #24C98F;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #0000000D;
		backdrop-filter: blur(4px);
	}
</style>